import {
	Button,
	Collapse,
	Form,
	Row,
	Col,
	Input,
	Select,
	Upload,
	message,
	Tabs,
	DatePicker,
} from 'antd'
import React, {memo, useState, useEffect, useRef} from 'react'
import {history, connect} from 'umi'
import {ArrowDownOutlined} from '@ant-design/icons'
import moment from 'moment'
import 'moment/locale/zh-cn'
import type {ColumnsType} from 'antd/es/table'
import CustomTable from '@/components/Table'
import styles from './index.less'
import {getBusinessCode} from '@/service/purchase/common'
import {getAllList} from '@/service/purchase/plan'
import {getDict} from '@/service/common/dict'
import {
	getAllSupplierAccessList,
	supplierBaseDetail,
} from '@/service/supplier/supplierAccess'
import {uploadMoreProps, getPublicDownloadUrl} from '@/service/common/upload'
import {
	addPayment,
	editPayment,
	invoiceImport,
	viewPayment,
	getWriteTableList,
	getSupplierBankData,
	paymentProcessAdd,
	paymentRelaunchFlow,
	paymentAuditFlow,
	paymentSaveTemporary,
} from '@/service/purchase/payment'
import {
	getIsProcessOpen,
	getSupplierBaseExcelList,
} from '@/service/purchase/initiation'
import BatchUpload from '@/components/BatchUpload'
import {modalApi} from '@/utils/modalReq'
import {twoDecimalPattern} from '@/utils/common/validator'
import Examine from '@/components/Examine'
import OperationRecord from '@/components/OperationRecord'
import {processRecordSave} from '@/service/common'

const {Panel} = Collapse
const {TextArea} = Input

type OtherParams = {
	payMethodname?: string
	applicantId?: string
	supplierId?: string
	supplierName?: string
	ledgerId?: string
	ledgerName?: string
	planId?: string
	supplierNo?: any
}

interface DataType {
	contractNo: string
	payCityname: string
	payDeptname: string
	resultMsg: string
}

const add = memo(
	(props: {
		global: {currentRoute: any}
		dispatch: any
		user: {orgId: string | number; userName: string; userId: any}
		location: any
	}) => {
		const {dispatch} = props
		const {currentRoute} = props.global
		const {userName, userId} = props.user
		const [paymentId, setPaymentId] = useState()
		const [type, setType] = useState<string>()
		const [dict, setDict] = useState({
			purchase_applypay_paymethod: [],
		})
		const [params, setParams] = useState({
			current: 1,
			size: 10,
		})
		const [form] = Form.useForm()
		const [formInfo] = Form.useForm()
		const [formUnit] = Form.useForm()
		const [otherParams, setOtherParams] = useState<OtherParams>()
		const [isUploadModalOpen, setIsUploadModalOpen] = useState(false)
		const [planId, setPlanId] = useState()
		const [bankData, setBankData] = useState<any[]>([])
		const [invoiceList, setInvoiceList] = useState([])
		const [invoiceLoading, setInvoiceLoading] = useState(false)
		const [invoiceTotal, setInvoiceTotal] = useState(0)
		const [allPlanList, setAllPlanList] = useState([])
		// 供应商列表
		const [supplierList, setSupplierList] = useState([])
		// 供应商详情列表
		const [supplierView, setSupplierView] = useState<any[]>([])
		const [fileList, setFileList] = useState<any>([])
		const [amount, setAmount] = useState<any>(0)
		const examineRef = useRef<any>(null)
		// 流程id
		const [instanceId, setInstanceId] = useState<string>()
		const [processOpen, setProcessOpen] = useState<number>(0)
		const [auditStatus, setAuditStatus] = useState<string>('0')
		const [newApplyTime, setNewApplyTime] = useState('')
		const goback = () => {
			dispatch({
				type: 'global/deleteTabs',
				payload: currentRoute,
			})
			const {goPath, pathParams} = props.location.query
			if (goPath) {
				history.push({
					pathname: goPath,
					query: {
						id: pathParams,
					},
				})
			} else {
				history.push({
					pathname: '/purchase/payment',
				})
			}
		}
		// 初始化-发票核销分页列表
		const onInvoiceListFun = () => {
			setInvoiceLoading(true)
			getWriteTableList({...params, applypayId: paymentId})
				.then((res: any) => {
					if (res?.data?.records) {
						setInvoiceList(() => res.data.records)
						setInvoiceTotal(res.data.total)
					}
					setInvoiceLoading(false)
				})
				.catch(() => {
					setInvoiceLoading(false)
				})
		}

		const initonInvoiceList = () => {
			const param = {
				current: 1,
				size: 10,
			}
			setParams(() => param)
		}

		useEffect(() => {
			onInvoiceListFun()
		}, [params, paymentId])

		// 初始化-采购计划申请单编号
		const onAllPlanList = () => {
			getAllList({id: planId})
				.then((res: any) => {
					if (res?.success) {
						setAllPlanList(() => res?.data)
					}
				})
				.catch((err) => {
					message.error(err)
				})
		}

		// 初始化-获取供应商对应银行
		const getSupplierBankList = (supplierId: any, callback?: any) => {
			getSupplierBankData({supplierId})
				.then((res: any) => {
					if (res?.success) {
						setBankData(res?.data?.bankData)
						callback(res?.data?.bankData)
					}
				})
				.catch((err) => {
					message.error(err)
				})
		}
		// 初始化-采购计划申请单编号
		const onCodeFun = () => {
			getBusinessCode({businessType: 5})
				.then((res: any) => {
					if (res?.success) {
						form.setFieldsValue({applypayNo: res?.data})
					}
				})
				.catch((err) => {
					message.error(err)
				})
		}

		// 获取供应商准入列表
		const getAccessList = () => {
			getAllSupplierAccessList()
				.then((res: any) => {
					if (res.success) {
						setSupplierList(res?.data)
					}
				})
				.catch((err) => {
					message.error(err)
				})
		}

		// 获取供应商详情
		const getSupplierView = (
			id: string,
			bankName: string,
			bankAccount: string,
		) => {
			supplierBaseDetail(id)
				.then((res: any) => {
					if (res?.success) {
						setSupplierView([{...res?.data, bankName, bankAccount}])
					}
				})
				.catch((err) => {
					message.error(err)
				})
		}

		// 初始化-流程是否激活
		const getIsProcessOpenFun = () => {
			getIsProcessOpen({businessType: 5})
				.then((res: any) => {
					if (res?.success) {
						setProcessOpen(() => res?.data)
					}
				})
				.catch((err) => {
					message.error(err)
				})
		}

		// 初始化-附件列表
		const getFileList = (ids: any) => {
			getPublicDownloadUrl(ids).then((res: any) => {
				if (res?.success) {
					const list = res?.data.map((item: any) => ({
						name: item?.filename,
						status: 'done',
						url: item?.url,
						response: {
							data: {
								id: item?.id,
							},
						},
					}))
					setFileList(() => [...list])
				}
			})
		}

		// 初始化-详情数据
		const getView = (id: string) => {
			viewPayment(id).then((res: any) => {
				if (res?.success) {
					setInstanceId(res?.data?.instanceId)
					setAuditStatus(res?.data?.auditStatus)
					setNewApplyTime(res?.data?.applyTime)
					delete res?.data?.applyTime
					form.setFieldsValue({
						...res?.data,
					})
					setAmount(() => res?.data?.amount)
					if (res?.data?.planId) {
						setPlanId(() => res?.data?.planId)
					}
					setOtherParams({
						...otherParams,
						payMethodname: res?.data.payMethodname,
						applicantId: res?.data.applicantId,
						supplierId: res?.data.supplierId,
						supplierName: res?.data.supplierName,
						ledgerId: res?.data.ledgerId,
						planId: res?.data?.planId,
						supplierNo: res?.data?.supplierNo,
						ledgerName: res?.data?.ledgerName,
					})
					getSupplierView(
						res?.data?.supplierId,
						res?.data?.ledgerName,
						res?.data?.ledgerAccount,
					)
					if (res?.data?.attachmentList.length) {
						getFileList(res?.data?.attachmentList)
					}
					getSupplierBankList(res?.data?.supplierId, () => {
						formInfo.setFieldsValue({
							supplierName: res?.data?.supplierName,
							ledgerId: res?.data?.ledgerId,
							ledgerAccount: res?.data?.ledgerAccount,
						})
						formUnit.setFieldsValue({
							supplierName: res?.data?.supplierName,
							ledgerId: res?.data?.ledgerId.toString(),
							ledgerAccount: res?.data?.ledgerAccount,
						})
					})
				}
			})
		}
		useEffect(() => {
			if (newApplyTime) {
				if (
					auditStatus &&
					auditStatus === '4' &&
					window.location.href.includes('edit') &&
					processOpen === 1
				) {
					form.setFieldsValue({
						applyTime: moment(
							moment().format('YYYY-MM-DD HH:mm:ss'),
						),
					})
				} else {
					form.setFieldsValue({
						applyTime: moment(newApplyTime),
					})
				}
			}
		}, [auditStatus, processOpen, newApplyTime])
		useEffect(() => {
			onAllPlanList()
		}, [planId])

		// 根据路由判断当前页面状态
		useEffect(() => {
			getDict(
				{
					dictKeys: ['purchase_applypay_paymethod'],
				},
				(res: any) => {
					setDict(res)
				},
			)
			getIsProcessOpenFun()
			getAccessList()
			const {id} = props.location.query
			const hrefs = window.location.href
			setPaymentId(() => id)
			if (id) {
				getView(id)
			}
			if (hrefs.includes('view')) {
				setType('view')
			} else if (hrefs.includes('add')) {
				setType('add')
				onCodeFun()
				form.setFieldsValue({
					applicantName: userName,
					applyTime: moment(moment().format('YYYY-MM-DD HH:mm:ss')),
				})
				setOtherParams({
					...otherParams,
					applicantId: userId,
				})
			} else if (hrefs.includes('edit')) {
				setType('edit')
			} else {
				setType('process')
			}
		}, [])

		const customizeHeader = (value: string) => (
			<div>
				<div className={styles.tip} />
				{value}
			</div>
		)
		const submit = async (btnType: string) => {
			const formData = await form.validateFields()
			const attachmentList = formData?.attachmentList?.fileList?.map(
				(item: any) => Number(item?.response?.data?.id),
			)
			const applyTime = moment(formData.applyTime).format(
				'YYYY-MM-DD HH:mm:ss',
			)
			let request
			if (btnType === 'submit') {
				if (auditStatus === '9' || !paymentId) {
					const formDataInfo = paymentId
						? await formUnit.validateFields()
						: await formInfo.validateFields()
					const queryData = {
						...formData,
						...formDataInfo,
						...otherParams,
						applyTime,
						attachmentList: attachmentList || [],
					}
					if (paymentId) {
						queryData.id = paymentId
					}
					if (processOpen === 1) {
						// 流程自动发起
						request = paymentProcessAdd(queryData)
					} else {
						// 流程未开启默认新增
						request = addPayment(queryData)
					}
				} else if (processOpen === 1 && auditStatus === '4') {
					const formDataUnit = await formUnit.validateFields()
					request = paymentRelaunchFlow(paymentId, {
						...formData,
						...formDataUnit,
						...otherParams,
						applyTime,
						attachmentList: attachmentList || [],
					})
				} else {
					const formDataUnit = await formUnit.validateFields()
					request = editPayment(paymentId, {
						...formData,
						...formDataUnit,
						...otherParams,
						applyTime,
						attachmentList: attachmentList || [],
					})
				}
			}
			if (btnType === 'save') {
				const formDataInfo = paymentId
					? await formUnit.validateFields()
					: await formInfo.validateFields()
				const queryData = {
					...formData,
					...formDataInfo,
					...otherParams,
					applyTime,
					attachmentList: attachmentList || [],
				}
				if (paymentId) {
					queryData.id = paymentId
				}
				request = paymentSaveTemporary(queryData)
			}
			request
				?.then((res) => {
					if (res?.success) {
						message.success(res.msg)
						goback()
					}
				})
				.catch((err) => {
					message.error(err)
				})
		}

		const supplierColumns: ColumnsType<planAPI.columns> = [
			{
				title: '供应商编号',
				dataIndex: 'supplierCode',
				align: 'center',
				width: 200,
				render: (text: any, record: any) => (
					<>
						{text ? (
							<Button
								type="link"
								size="small"
								onClick={() => {
									history.push({
										pathname: '/supplier/admittance/view',
										query: {
											id: record?.id,
										},
									})
								}}>
								{text}
							</Button>
						) : (
							'--'
						)}
					</>
				),
			},
			{
				title: '供应商名称',
				dataIndex: 'supplierName',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '收款单位',
				dataIndex: 'bankName',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '银行账号',
				dataIndex: 'bankAccount',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '供应商联系人/电话',
				dataIndex: 'contactPhone',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
		]
		const invoiceColumns = [
			{
				title: '发票编号',
				dataIndex: 'invoiceNo',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '发票日期',
				dataIndex: 'invoiceTime',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '货物名称',
				dataIndex: 'goodsName',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '货物数量',
				dataIndex: 'quantity',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '发票金额',
				dataIndex: 'amount',
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
		]

		// 采购计划id变化
		const onPlanIdChange = (value: string, option: any) => {
			getSupplierBankList(option?.supplierId, () => {})
			const supplierItem: any = supplierList?.filter(
				(item: any) => item?.supplierCode === option?.supplierNo,
			)[0]

			form.setFieldsValue({
				contractNo: option.contractNo,
				contractName: option.contractName,
			})
			formInfo.setFieldsValue({
				supplierName: supplierItem.supplierName,
				ledgerAccount: null,
				ledgerId: null,
				ledgerName: null,
			})
			formUnit.setFieldsValue({
				supplierName: supplierItem.supplierName,
				ledgerAccount: null,
				ledgerId: null,
				ledgerName: null,
			})
			setOtherParams({
				...otherParams,
				planId: option?.id,
				supplierId: supplierItem?.id,
				supplierName: supplierItem?.supplierName,
				supplierNo: supplierItem?.supplierCode,
			})
			setSupplierView([supplierItem])
		}

		// 开户银行变化
		const onLedgerIdChange = (value: string, option: any) => {
			formInfo.setFieldsValue({
				ledgerAccount: option.bankAccount,
			})
			formUnit.setFieldsValue({
				ledgerAccount: option.bankAccount,
			})
			setOtherParams({
				...otherParams,
				ledgerId: option.id,
				ledgerName: option?.bankName,
			})
			const param = {
				...supplierView[0],
				bankName: option?.bankName,
				bankAccount: option?.bankAccount,
			}
			setSupplierView([param])
		}
		// 付款类型变化
		const onPaymethodChange = (value: string, option: any) => {
			setOtherParams({...otherParams, payMethodname: option.dictValue})
		}

		// // 供应商变化
		// const onAccessListChange = (value: string, option: any) => {
		// 	setOtherParams({
		// 		...otherParams,
		// 		supplierId: option?.id,
		// 		supplierName: option?.supplierName,
		// 		ledgerId: option.id,
		// 		ledgerName: option.supplierName,
		// 	})
		// 	formInfo.setFieldsValue({
		// 		ledgerName: option.supplierName,
		// 	})
		// 	setSupplierView([option])
		// }

		const errorColumns: ColumnsType<DataType> = [
			{
				title: '发票编号',
				dataIndex: 'invoiceNo',
				align: 'center',
				width: 220,
				render: (text: string) => (
					<>
						<div
							className="ellipsis"
							title={text}
							style={{width: 200}}>
							{text || '--'}
						</div>
					</>
				),
			},
			{
				title: '发票日期',
				dataIndex: 'invoiceTime',
				align: 'center',
				width: 220,
				render: (text: string) => (
					<>
						<div
							className="ellipsis"
							title={text}
							style={{width: 200}}>
							{moment(text).format('YYYY-MM-DD') || '--'}
						</div>
					</>
				),
			},
			{
				title: '发票金额',
				dataIndex: 'amount',
				align: 'center',
				width: 220,
				render: (text: string) => (
					<>
						<div
							className="ellipsis"
							title={text}
							style={{width: 200}}>
							{text || '--'}
						</div>
					</>
				),
			},
			{
				title: '失败原因',
				dataIndex: 'resultMsg',
				align: 'center',
				width: 220,
				render: (text: string) => (
					<>
						<div
							className="ellipsis"
							title={text}
							style={{width: 200}}>
							{text || '--'}
						</div>
					</>
				),
			},
		]

		/** 审核 */
		const onCompleteTask = async (pass: string) => {
			const examineData = await examineRef.current.getData()
			if (examineData?.url) {
				const flowParams = {
					message: examineData?.message,
					businessId: props.location.query?.id,
					instanceId,
					pass,
					attachmentList: examineData?.url?.split(','),
				}
				if (pass === '3') {
					flowParams.message = JSON.stringify(examineData)
				}
				paymentAuditFlow(flowParams)
					.then((res: {msg: string; success: boolean}) => {
						if (res?.success) {
							if (pass === '3') {
								processRecordSave({
									bizType: 5,
									bizNo: props?.location?.query?.id,
									processId: instanceId,
								})
							}
							message.success(res.msg)
							goback()
						}
					})
					.catch((err: any) => {
						message.error(err)
					})
			} else {
				message.warning('请上传附件')
			}
		}
		return (
			<div className={styles.admittanceAdd}>
				<div className={`${styles.content} ${styles.formDetils}`}>
					{instanceId && (type === 'view' || type === 'process') ? (
						<Examine
							ref={examineRef}
							examineType={type === 'process'}
							orgId={props?.user?.orgId}
							processInstanceId={instanceId}
							required
							bizType={5}
							bizNo={props?.location?.query?.id}
						/>
					) : (
						''
					)}

					<Collapse
						defaultActiveKey={['1', '2']}
						ghost
						expandIconPosition="end">
						<Panel header={customizeHeader('基础信息')} key="1">
							<Form
								form={form}
								name="basic"
								layout="horizontal"
								labelCol={{flex: '160px'}}
								labelAlign="right"
								labelWrap
								initialValues={{remember: true}}
								autoComplete="off"
								disabled={
									type === 'view' || type === 'process'
								}>
								<Row gutter={12}>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="付款申请单编号"
											name="applypayNo"
											rules={[{required: true}]}>
											<Input
												placeholder="请输入"
												disabled
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="采购计划申请单编号"
											name="planNo"
											rules={[{required: true}]}>
											<Select
												showSearch
												optionFilterProp="planNo"
												placeholder="请选择"
												options={allPlanList}
												fieldNames={{
													label: 'planNo',
													value: 'planNo',
												}}
												onChange={onPlanIdChange}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="合同编号"
											name="contractNo"
											rules={[{required: true}]}>
											<Input
												placeholder="请输入"
												disabled
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="合同名称"
											name="contractName"
											rules={[{required: true}]}>
											<Input
												placeholder="请输入"
												disabled
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="付款类型"
											name="payMethod"
											rules={[{required: true}]}>
											<Select
												showSearch
												optionFilterProp="dictValue"
												placeholder="请选择"
												options={[
													...dict.purchase_applypay_paymethod,
												]}
												fieldNames={{
													label: 'dictValue',
													value: 'dictKey',
												}}
												onChange={onPaymethodChange}
											/>
										</Form.Item>
									</Col>

									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="付款金额"
											name="amount"
											getValueFromEvent={
												(event: any) =>
													event.target.value.replace(
														/^(-)*(\d+)\.(\d\d).*$/,
														'$1$2.$3',
													) // 只能输入两位小数
											}
											rules={[
												{
													required: true,
													pattern: twoDecimalPattern, // 只能输入数字跟小数点 两位小数
													message:
														'请输入正确的付款金额',
												},
											]}>
											{type === 'view' ? (
												<>
													<span>{amount}元</span>
												</>
											) : (
												<Input
													placeholder="请输入"
													suffix="元"
												/>
											)}
										</Form.Item>
									</Col>
									<Col sm={{span: 24}} />
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="付款申请描述"
											name="remark"
											rules={[{required: true}]}>
											<TextArea
												maxLength={100}
												placeholder="请输入（最多100个字）"
												autoSize={{
													minRows: 3,
													maxRows: 6,
												}}
											/>
										</Form.Item>
									</Col>
									<Col sm={{span: 24}} />
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="申请人"
											name="applicantName">
											<Input
												placeholder="请输入"
												disabled
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="申请时间"
											name="applyTime">
											{processOpen === 1 ? (
												<DatePicker
													format="YYYY-MM-DD HH:mm:ss"
													disabled
												/>
											) : (
												<DatePicker
													format="YYYY-MM-DD"
													allowClear={false}
												/>
											)}
										</Form.Item>
									</Col>
									<Col sm={{span: 24}} />
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="附件上传"
											name="attachmentList">
											<Upload
												{...uploadMoreProps(
													'payment',
													0,
													fileList,
													(
														t: string,
														flist: any,
														file: any,
													) => {
														if (t === 'sizeBig') {
															const list =
																flist?.filter(
																	(
																		item: any,
																	) =>
																		item.id.toString() !==
																		file.id.toString(),
																)
															setFileList(
																() => list,
															)
															return false
														}
														if (t === 'error') {
															const list =
																flist?.filter(
																	(
																		item: any,
																	) =>
																		item.id.toString() !==
																		file.id.toString(),
																)
															setFileList(
																() => list,
															)
														} else if (
															[
																'done',
																'setData',
															].includes(t)
														) {
															setFileList(
																() => flist,
															)
														} else if (
															t === 'remove'
														) {
															const list =
																flist?.filter(
																	(
																		item: any,
																	) =>
																		item.id.toString() !==
																		file.id.toString(),
																)
															setFileList(
																() => list,
															)
														}
														return true
													},
												)}>
												<Button
													type="primary"
													ghost
													shape="round"
													size="small">
													请选择文件
												</Button>
											</Upload>
										</Form.Item>
									</Col>
									<Col sm={{span: 24}}>
										<div className="uploadTip">
											附件说明：附件最大支持200M，支持格式：PDF、Word、Excel、JPG、PNG、ZIP、RAR
										</div>
									</Col>
								</Row>
							</Form>
						</Panel>
						{type === 'add' ? (
							<Panel
								header={customizeHeader('收款单位信息')}
								key="2">
								<Form
									form={formInfo}
									name="basic"
									layout="horizontal"
									labelCol={{flex: '100px'}}
									labelAlign="right"
									labelWrap
									initialValues={{remember: true}}
									autoComplete="off">
									<Row gutter={12}>
										<Col
											sm={{span: 24}}
											md={{span: 12}}
											lg={{span: 8}}>
											<Form.Item
												label="供应商名称"
												name="supplierName"
												rules={[
													{
														required: true,
													},
												]}>
												<Input
													placeholder="自动带出"
													readOnly
												/>
											</Form.Item>
										</Col>
										<Col
											sm={{span: 24}}
											md={{span: 12}}
											lg={{span: 8}}>
											<Form.Item
												label="开户银行"
												name="ledgerId"
												rules={[
													{
														required: true,
													},
												]}>
												<Select
													showSearch
													optionFilterProp="supplierName"
													placeholder="请选择"
													fieldNames={{
														label: 'bankName',
														value: 'id',
													}}
													options={bankData}
													onChange={onLedgerIdChange}
												/>
											</Form.Item>
										</Col>
										<Col
											sm={{span: 24}}
											md={{span: 12}}
											lg={{span: 8}}>
											<Form.Item
												label="开户账号"
												name="ledgerAccount"
												rules={[
													{
														required: true,
													},
												]}>
												<Input
													placeholder="自动带出"
													readOnly
												/>
											</Form.Item>
										</Col>
									</Row>
								</Form>
								<CustomTable
									columns={supplierColumns}
									callback={() => {}}
									dataSource={supplierView}
								/>
							</Panel>
						) : (
							''
						)}
					</Collapse>
					{type !== 'add' ? (
						<div className={styles.tabs}>
							<Tabs
								type="card"
								defaultActiveKey="1"
								items={[
									{
										label: '收款单位',
										key: '1',
										children: (
											<>
												{type !== 'process' &&
												type !== 'view' ? (
													<Form
														form={formUnit}
														name="basic"
														layout="horizontal"
														labelCol={{
															flex: '100px',
														}}
														labelAlign="right"
														labelWrap
														initialValues={{
															remember: true,
														}}
														autoComplete="off">
														<Row gutter={12}>
															<Col
																sm={{span: 24}}
																md={{span: 12}}
																lg={{span: 8}}>
																<Form.Item
																	label="供应商名称"
																	name="supplierName"
																	rules={[
																		{
																			required:
																				true,
																		},
																	]}>
																	<Input
																		placeholder="自动带出"
																		readOnly
																	/>
																</Form.Item>
															</Col>
															<Col
																sm={{span: 24}}
																md={{span: 12}}
																lg={{span: 8}}>
																<Form.Item
																	label="开户银行"
																	name="ledgerId"
																	rules={[
																		{
																			required:
																				true,
																		},
																	]}>
																	<Select
																		showSearch
																		optionFilterProp="supplierName"
																		placeholder="请选择"
																		fieldNames={{
																			label: 'bankName',
																			value: 'id',
																		}}
																		options={
																			bankData
																		}
																		onChange={
																			onLedgerIdChange
																		}
																	/>
																</Form.Item>
															</Col>
															<Col
																sm={{span: 24}}
																md={{span: 12}}
																lg={{span: 8}}>
																<Form.Item
																	label="开户账号"
																	name="ledgerAccount"
																	rules={[
																		{
																			required:
																				true,
																		},
																	]}>
																	<Input
																		placeholder="自动带出"
																		readOnly
																	/>
																</Form.Item>
															</Col>
														</Row>
													</Form>
												) : (
													''
												)}
												<CustomTable
													columns={supplierColumns}
													callback={() => {}}
													dataSource={supplierView}
												/>
											</>
										),
									},
									{
										label: '发票核销',
										key: '2',
										children: (
											<>
												{auditStatus === '1' ? (
													<Button
														icon={
															<ArrowDownOutlined />
														}
														ghost
														size="small"
														className="btn_import"
														onClick={() =>
															setIsUploadModalOpen(
																true,
															)
														}>
														导入发票
													</Button>
												) : null}
												<CustomTable
													params={params}
													columns={invoiceColumns}
													pagination
													total={invoiceTotal}
													callback={(
														pagination: any,
													) => {
														setParams(pagination)
													}}
													loading={invoiceLoading}
													dataSource={invoiceList}
												/>
											</>
										),
									},
									{
										label: '操作记录',
										key: '3',
										children: (
											<OperationRecord
												businessId={
													props.location.query?.id
												}
												businessType={35}
											/>
										),
									},
								]}
							/>
						</div>
					) : (
						''
					)}
					<div className={styles.wrap}>
						<Button onClick={goback}>取消</Button>
						{type !== 'view' && type !== 'process' ? (
							<>
								<Button
									type="primary"
									htmlType="submit"
									onClick={() => submit('save')}>
									保存
								</Button>
								<Button
									type="primary"
									htmlType="submit"
									onClick={() => submit('submit')}>
									提交
								</Button>
							</>
						) : null}
						{type === 'process' ? (
							<>
								<Button
									type="primary"
									htmlType="submit"
									onClick={() => {
										onCompleteTask('1')
									}}>
									同意
								</Button>
								<Button
									onClick={() => {
										onCompleteTask('2')
									}}>
									驳回
								</Button>
								<Button
									onClick={() => {
										onCompleteTask('3')
									}}>
									拒绝
								</Button>
							</>
						) : (
							''
						)}
					</div>
				</div>
				<BatchUpload
					isModalOpen={isUploadModalOpen}
					setIsModalOpen={setIsUploadModalOpen}
					importData={invoiceImport}
					dataId={props.location?.query?.id}
					onTableList={getSupplierBaseExcelList}
					getListData={initonInvoiceList}
					uploadFileUrl={`${modalApi.purchase}/shopec-purchase-invoice/invoice/import/view/${props.location?.query?.id}`}
					columns={errorColumns}
					sourceId={15}
					templateType="发票"
				/>
			</div>
		)
	},
)

export default connect(({global, user}: any) => ({global, user}))(add)
